<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>
    
    <!--  basic meta information -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Type" content="application/json; charset=utf-8">
    <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">
    
    <title>My ARchitect World</title>

    <script src="architect://architect.js"></script>

    <!-- positioning of poi-radar -->
    <link rel="stylesheet" href="css/poi-radar.css" />
    

    <!-- jquery mobile CSS -->
    <link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />
    <!-- required to set background transparent & enable "click through" -->
    <link rel="stylesheet" href="jquery/jquery-mobile-transparent-ui-overlay.css" />

    <!-- jquery JS files -->
    <script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.mobile-1.3.2.min.js"></script>


    <!-- marker representation-->
    <script src="js/marker.js"></script>    

    <!-- World logic-->
    <script type="text/javascript" src="js/addingRadar.js"></script>

    <!-- radar component -->
    <script type="text/javascript" src="js/radar.js"></script>
</head>
    
    <body >
     <div data-role="page" id="page1" style="background: none;" >
            
            <!-- MAIN PAGE CONTENT -->

            <!-- the radar div - Wikitude SDK radar will be drawn into this div -->
            <div class="radarContainer_left" id="radarContainer"></div>

            <!-- transparent footer-->
            <div data-role="footer" class="ui-bar" data-theme="f" data-position="fixed" style="text-align:center;">

                <!-- small status-button -->
                <a style="text-align:right;" id="popupInfoButton" href="#popupInfo" data-rel="popup" data-role="button" class="ui-icon-alt" data-inline="true" data-transition="pop" data-icon="alert" data-theme="e" data-iconpos="notext">Log</a> </p>

                <!-- popup displayed when button clicked -->
                <div data-role="popup" id="popupInfo" class="ui-content" data-theme="e" style="max-width:350px;">
                  <p style="text-align:right;" id="status-message">Trying to find out where you are</p>
                </div>
                
            </div>



            <!-- PANELS, ONLY VISIBLE ON DEMAND -->

            <!-- panel containing POI detail information -->
            <div data-role="panel" id="panel-poidetail" data-position="right" data-display="overlay" style="background-color:#F0F0F0;" data-theme="c">

                <!-- header with "close" button -->
                <div data-role="header" data-theme="c">
                    <h1>Details</h1>
                    <a href="#header" data-rel="close">Close</a>
                </div>

                <!-- content of POI detail page, you may also add thumbnails etc. here if you like -->
                 <div data-role="content">

                    <!-- title -->
                    <h3 id="poi-detail-title"></h3>

                    <!-- description -->
                    <h4 id="poi-detail-description"></h4>

                    <!-- distance -->
                    <h4>Distance: <a id="poi-detail-distance"></a></h4>
                </div>
            </div>

        </div>

    </body>
    
</html>